<!--商品活动页-->
<template>
    <div class="hot-spot">
        <div class="header-nav">
            <div class="nav-back-share">
                <span class="back" @click="router.back">❮</span>
                <span class="share" @click="toggleShareMenu"><img src="/src/assets/icons/svg/share.svg"/></span>
            </div>
        </div>
        <div class="banner">
            <span v-if="moduleName" class="title">{{ moduleName }}</span>
            <img src="/src/assets/lunbo/image1.jpeg" width="100%" height="250" />
        </div>
        <ShopWelfareList />
    </div>

    <!--分享-->
    <ShareFrame :isShareMenuVisible="isShareMenuVisible" />

</template>

<script setup>
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
import ShopWelfareList from '@/components/product/ShopWelfareList.vue';
import router from '@/router';
import ShareFrame from '@/components/ShareFrame.vue';

const route = useRoute();
// const router = useRouter();

const moduleId = route.params.moduleId;
const moduleName = route.params.moduleName;

onMounted(() => {
    window.addEventListener('click', closeShare);
    alert(moduleId);
});

const isShareMenuVisible = ref(false);

const toggleShareMenu = () => {
    isShareMenuVisible.value = true;
};
//  关闭分享的弹窗
const closeShare = (event) => {
    if (isShareMenuVisible.value) {
        const className = event.target.className;
        if (className === 'share-qr-code' || className === 'share-icon' || className === 'close-share') {
            isShareMenuVisible.value = false;
        }
    }
}


</script>

<style scoped>
.hot-spot {
    background-color: aliceblue;
    width: 100%;
}
.hot-spot .header-nav {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    height: 35px;
    background-color: #fff;
    z-index: 100;
}
.header-nav .nav-back-share {
    width: 90%;
    margin: auto;
}
.nav-back-share img {
    width: 21px;
    height: 21px;
}
.nav-back-share .back {
    font-size: 20px;
    width: 21px;
    text-align: left;
    float: left;
    margin-top: 4px;
}
.nav-back-share .share {
    float: right;
    margin-top: 8px;
}

.hot-spot .banner {
    margin-top: 35px;
    width: 100%;
}
.banner .title {
    height: 35px;
    position: absolute;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    background-color: red;
    width: 30%;
    color: white;
    opacity: 0.6;
    padding-top: 5px;
    border-radius: 50px 0px 50px 0px;
}


</style>